<!-- 拖拽滑动 -->
<template>
  <div class="bgbig" :class="{'hide':isHide}" @click="goPage"><span></span><span></span><span></span><i>实时直播大屏</i></div>
</template>

<script>
export default {
  name: 'defaultDrag',
  props:['id'],
  data() {
    return {
      isHide:false,
      timer:null,      
    }
  },

  components: {},

  computed: {},
  mounted() {
    window.addEventListener('scroll',this.scrollFn,false);
  },
  methods: {
    scrollFn(){
      this.isHide = true;
      clearInterval(this.timer);
      this.timer = null;
      this.timer = setInterval(()=>{
        this.isHide = false;
      },600);
    },
    goPage(){
      let that = this;
      this.$router.push({
        path: '/liveBigScreenMain',
        query: { id: that.id},
      })
    }
  },
  destroyed() {
    window.removeEventListener('scroll',this.scrollFn);
  },
}
</script>
<style scoped lang="less">
// 实时大屏
  .bgbig {
    position: fixed;
    top: 430px;
    right: 0;
    z-index:19 !important;
    border-radius: 0.4267rem 0rem 0rem 0.4267rem;
    background: rgba(5, 18, 42, 0.7);
    padding: 0 0.2933rem;
    width: 3.4667rem;
    box-sizing: border-box;
    line-height: 0.8533rem;
    color: #fff;
    transition: all linear 300ms;
    white-space:nowrap;
    font-size: 0.37rem;
    &.hide{
      right: -2.62rem;
    }
    span {
      position: relative;
      top: 0.0533rem;
      border-radius: 4px;
      display: inline-block;
      width: 0.07rem;
      height: 0.32rem;
      background: #ff025d;
      margin-right: 0.08rem;
    }
    span:nth-of-type(2) {
      height: 0.45rem;
      background: #ff167c;
    }
    span:nth-of-type(3) {
      height: 0.24rem;
      background: #ff2ea0;
      margin-right: 0.1867rem;
    }
    i{
      font-style: normal;
    }
  }
</style>